<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <div id="app">
    <!--
    <div v-if="loginType === 'phone'">
      <label>手机:</label>
      <input type="text" placeholder="请输入手机号"><br>
      <label>密码:</label>
      <input type="text" placeholder="请输入密码">
    </div>
    <div v-else>
      <label>Email:</label>
      <input type="text" placeholder="请输入邮箱"><br>
      <label>密码:</label>
      <input type="text" placeholder="请输入密码">
    </div>
    -->
    <div v-show="loginType === 'phone'">
      <label>手机:</label>
      <input type="text" placeholder="请输入手机号"><br>
      <label>密码:</label>
      <input type="text" placeholder="请输入密码">
    </div>
    <div v-show="loginType === 'email'">
      <label>Email:</label>
      <input type="text" placeholder="请输入邮箱"><br>
      <label>密码:</label>
      <input type="text" placeholder="请输入密码">
    </div>
    <button @click="change">切换登录方式</button>
  </div>
<script src="js/vue.js"></script>
<script>
  const app = Vue.createApp({
    data() {
      return {
        loginType: 'phone' // email
      }
    },
    methods:{
      change(){
         this.loginType === 'phone' ? this.loginType = 'email' : this.loginType = 'phone';
      }
    }
  }).mount('#app');
</script>
</body>
</html>
